<template>
  <div class="time-range-slider">
    <div class="slider-track" ref="track">
      <!-- 滑动条背景 -->
      <div class="slider-rail"></div>
      <!-- 选中区域 -->
      <div
          class="slider-selection"
          :style="{
          left: `${leftPosition}%`, 
          width: `${rightPosition - leftPosition}%` 
        }"
      ></div>
      <!-- 左侧手柄 -->
      <div
          class="slider-handle left"
          :style="{ left: `${leftPosition}%` }"
          @mousedown="startDrag($event, 'left')"
      >
        <div class="tooltip">{{ formatTime(modelValue[0]) }}</div>
      </div>
      <!-- 右侧手柄 -->
      <div
          class="slider-handle right"
          :style="{ left: `${rightPosition}%` }"
          @mousedown="startDrag($event, 'right')"
      >
        <div class="tooltip">{{ formatTime(modelValue[1]) }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref, computed, onUnmounted} from "vue"

interface Props {
  modelValue: [number, number]
  min?: number
  max?: number
  step?: number
}

const props = withDefaults(defineProps<Props>(), {
  min: 0,
  max: 100,
  step: 0.1
})

const emit = defineEmits<{
  "update:modelValue": [[number, number]]
}>()

const track = ref<HTMLElement | null>(null)
const isDragging = ref(false)
const currentHandle = ref<"left" | "right" | null>(null)

// 计算位置百分比
const leftPosition = computed(() => {
  return ((props.modelValue[0] - props.min) / (props.max - props.min)) * 100
})

const rightPosition = computed(() => {
  return ((props.modelValue[1] - props.min) / (props.max - props.min)) * 100
})

// 格式化时间显示
const formatTime = (seconds: number) => {
  const mins = Math.floor(seconds / 60)
  const secs = Math.floor(seconds % 60)
  const ms = Math.floor((seconds % 1) * 10)
  return `${mins}:${secs.toString().padStart(2, "0")}.${ms}`
}

// 根据鼠标位置计算值
const calculateValue = (clientX: number): number => {
  if (!track.value) return 0

  const rect = track.value.getBoundingClientRect()
  const percentage = (clientX - rect.left) / rect.width
  let value = props.min + (props.max - props.min) * percentage

  // 应用步进
  value = Math.round(value / props.step) * props.step

  // 限制在范围内
  return Math.max(props.min, Math.min(props.max, value))
}

// 开始拖动
const startDrag = (event: MouseEvent, handle: "left" | "right") => {
  event.preventDefault()
  isDragging.value = true
  currentHandle.value = handle
  document.addEventListener("mousemove", handleDrag)
  document.addEventListener("mouseup", stopDrag)
}

// 处理拖动
const handleDrag = (event: MouseEvent) => {
  if (!isDragging.value || !currentHandle.value) return

  const newValue = calculateValue(event.clientX)
  const values = [...props.modelValue] as [number, number]

  if (currentHandle.value === "left") {
    if (newValue < values[1]) {
      values[0] = newValue
    }
  } else {
    if (newValue > values[0]) {
      values[1] = newValue
    }
  }

  emit("update:modelValue", values)
}

// 停止拖动
const stopDrag = () => {
  isDragging.value = false
  currentHandle.value = null
  document.removeEventListener("mousemove", handleDrag)
  document.removeEventListener("mouseup", stopDrag)
}

// 清理事件监听
onUnmounted(() => {
  document.removeEventListener("mousemove", handleDrag)
  document.removeEventListener("mouseup", stopDrag)
})
</script>

<style lang="scss" scoped>
.time-range-slider {
  position: relative;
  height: 40px;
  padding: 10px 0;

  .slider-track {
    position: relative;
    height: 4px;
    width: 100%;
    background: #e0e0e0;
    border-radius: 2px;
    cursor: pointer;
  }

  .slider-rail {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #e0e0e0;
    border-radius: 2px;
  }

  .slider-selection {
    position: absolute;
    height: 100%;
    background-color: #1976D2;
    border-radius: 2px;
  }

  .slider-handle {
    position: absolute;
    width: 16px;
    height: 16px;
    background-color: #fff;
    border: 2px solid #1976D2;
    border-radius: 50%;
    transform: translate(-50%, -6px);
    cursor: grab;
    transition: box-shadow 0.2s;

    &:hover {
      box-shadow: 0 0 0 5px rgba(25, 118, 210, 0.1);
    }

    &:active {
      cursor: grabbing;
    }

    .tooltip {
      position: absolute;
      top: -25px;
      left: 50%;
      transform: translateX(-50%);
      background: #333;
      color: white;
      padding: 2px 6px;
      border-radius: 3px;
      font-size: 12px;
      white-space: nowrap;
    }
  }
}
</style> 